<template>
  <a-modal
    v-model:open="open"
    v-model:title="title"
    @cancel="handleCancle"
    width="488px"
    :footer="null"
  >
    <div class="info">
      <div>
        <span class="info-label">客户端IP</span
        ><span>{{ opDetail.remoteAddr }}</span>
      </div>
      <div>
        <span class="info-label">服务端IP</span
        ><span>{{ opDetail.requestIp }}</span>
      </div>
      <div>
        <span class="info-label">请求耗时</span
        ><span>{{ opDetail.accessDuration }}</span>
      </div>
      <div>
        <span class="info-label">请求是否成功</span
        ><span>
          <a-tag :color="opDetail.accessSuccess ? 'green' : 'error'">
            {{ opDetail.accessSuccess ? '成功' : '失败' }}
          </a-tag>
        </span>
      </div>
      <div>
        <span class="info-label">操作详情</span
        ><span>{{ opDetail.operationMsg }}</span>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref, watch } from 'vue'
import { useVModel } from '@vueuse/core'

/**
 * 外部参数
 */
let props = defineProps({
  open: { type: Boolean, default: () => true },
  title: {
    type: String,
    default() {
      return ''
    },
  },
  contextData: { ype: Object, default: () => {} },
})
/**
 * 事件定义
 */
let emit = defineEmits(['update:open', 'update:title'])
/**
 * 双向绑定
 */
let open = useVModel(props, 'open', emit)
let title = useVModel(props, 'title', emit)
let opDetail = reactive({
  remoteAddr: undefined,
  requestIp: undefined,
  accessDuration: undefined,
  accessSuccess: undefined,
  operationMsg: undefined,
})
//form表单数据变化
watch(
  () => props.contextData,
  contextData => {
    opDetail = reactive({ ...opDetail, ...contextData })
  },
  { deep: true, immediate: true },
)
let handleCancle = () => {
  open.value = false
}
</script>
<style lang="less" scoped>
:global(.ant-modal .ant-modal-content) {
  padding: 16px 0px 10px 0px;
  background: #fff;
  border-radius: 2px;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 9px 4px 0 rgba(0, 0, 0, 0.05),
    0 12px 48px 16px rgba(0, 0, 0, 0.03);
}
:global(.ant-modal .ant-modal-footer) {
  padding-right: 24px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}
:global(.ant-modal .ant-modal-header .ant-modal-title) {
  line-height: 24px;
  font-weight: 500;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 16px;
}
:global(.ant-modal .ant-modal-header) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
  padding-left: 24px;
}
.info {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
  padding: 0 24px;
}
.info div {
  margin-top: 24px;
}
.info div:last-child {
  margin-bottom: 24px;
}
.info-label::after {
  content: ':';
  position: relative;
  top: -0.5px;
  margin-inline: 2px 8px;
}
</style>
